<template>
	<div style="position: relative;height: 100%;">
		<div class="header row y_center" style="justify-content: space-between;">
			<el-breadcrumb separator=">">
				<el-breadcrumb-item>{{ cateName }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="content column">
			<div class="data_list">
				<el-table :data="dataList" border v-loading="dateListLoading">
					<el-table-column label="ID" width="60" align="center" prop="id" />
					<el-table-column label="名称" width="180" prop="name" />
					<el-table-column label="数据类型" prop="data_type" width="110" />
					<el-table-column label="Key" prop="key" />
					<el-table-column label="Value" prop="value" />
					<el-table-column prop="action" label="操作" align="center" width="150">
						<template #default="scope">
							<el-button link type="" icon="" size="small" @click="edit(scope.row)">编辑</el-button>
							<el-divider direction="vertical" />
							<el-popconfirm class="box-item" title="删除后不可恢复,确认删除吗?" placement="bottom"
								@confirm="del(scope.row)">
								<template #reference>
									<el-button link type="danger" icon="" size="small"
										:loading="delLoading[`_${scope.row.id}`]">删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

		<div class="noneData column" v-if="dataList.length == 0">
			<el-empty description="请先选择类目" />
		</div>
	</div>
</template>

<script>
import {
	ElMessage
} from 'element-plus'
import {
	useDataDictionaryStore
} from '../../../../stores/dataDictionary'
export default {
	data() {
		return {
			delLoading: {},
			dateListLoading: false,
			cateId: 0,
			cateName: '',
			dataList: [],
		}
	},
	computed: {
		dataDictionaryStore() {
			return useDataDictionaryStore()
		}
	},

	methods: {
		getCateInnerDataList() {
			this.dateListLoading = true
			this.dataDictionaryStore.getCateInnerDataList(this.cateId).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				this.dataList = res.data.list
			}).catch(err => {
				ElMessage.error('数据获取失败,' + err.message)
			}).finally(() => {
				this.dateListLoading = false
			})
		},
		edit(row) {
			this.$emit('dataItemEdit', JSON.parse(JSON.stringify(row)))
		},
		del(row) {
			this.delLoading[`_${row.id}`] = true
			this.dataDictionaryStore.delete(row.id).then(res => {
				if (res.code !== 200) {
					throw new Error(res.message);
				}
				ElMessage.success(res.message)
				this.getCateInnerDataList()
			}).catch(err => {
				ElMessage.error(err.message)
			}).finally(() => {
				this.delLoading[`_${row.id}`] = false
			})
		}
	}
}
</script>

<style scoped lang="less">
.header {
	height: 40px;
	padding: 0 10px;
	border-bottom: 1px solid var(--el-border-color-light);
	background-color: var(--el-color-info-light-9) !important;
}

.noneData {
	background-color: var(--el-fill-color-blank);
	position: absolute;
	width: 100%;
	top: 0;
	bottom: 0;
	z-index: 5;
}

.content {
	.cate_info {
		padding: 20px;
		background-color: var(--el-color-info-light-9);
		margin: 10px;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	.data_list {
		padding: 10px;
	}
}

:deep(.el-table__header th) {
	background-color: unset !important;
}
</style>